<template>
  <div style="margin-left:20px">
    <el-row>
      <el-col :span="12">
        <h3>一、单选框</h3>
        <div>
          <h4>1.1、基础用法</h4>
          <el-radio v-model="radio" label="1">备选项</el-radio>
          <el-radio v-model="radio" label="2">备选项</el-radio>
        </div>

        <div style="margin-top:30px">
          <h4>1.2、禁用状态</h4>
          <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
          <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
        </div>

        <div style="margin-top:30px">
          <h4>1.3、单选框组，在el-radio中设置好label即可，无需再给每一个el-radio绑定变量</h4>
          <el-radio-group v-model="radio3">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
          </el-radio-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.4、按钮样式，只需要把el-radio元素换成el-radio-button元素即可</h4>
          <el-radio-group v-model="radio4">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.5、带有边框</h4>
          <el-radio-group v-model="radio5">
            <el-radio label="1" border>备选项1</el-radio>
            <el-radio label="2" border>备选项2</el-radio>
          </el-radio-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.6、change事件</h4>
          <el-radio-group v-model="radio6" @change="changes">
            <el-radio label="1" border>备选项1</el-radio>
            <el-radio label="2" border>备选项2</el-radio>
          </el-radio-group>
        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、多选框</h3>
        <div style="margin-top:30px">
          <h4>1.1、基础用法</h4>
          <el-checkbox v-model="checked">备选项</el-checkbox>
        </div>

        <div style="margin-top:30px">
          <h4>1.2、禁用状态</h4>
          <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>
          <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
        </div>

        <div style="margin-top:30px">
          <h4>1.3、多选框组</h4>
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
          </el-checkbox-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.4、indeterminate 状态,indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果</h4>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox label="上海">上海</el-checkbox>
            <el-checkbox label="北京">北京</el-checkbox>
            <el-checkbox label="广州">广州</el-checkbox>
          </el-checkbox-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.5、可选项目数量的限制</h4>
          <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.6、按钮样式</h4>
          <el-checkbox-group v-model="checkboxGroup1">
            <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
          </el-checkbox-group>
        </div>

        <div style="margin-top:30px">
          <h4>1.7、带有边框</h4>
          <el-checkbox v-model="checked1" label="备选项1" border></el-checkbox>
          <el-checkbox v-model="checked2" label="备选项2" border></el-checkbox>
        </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
const cityOptions = ['上海', '北京', '广州'];
export default {
  data () {
    return {
      radio: '1',
      radio1: '选中且禁用',
      radio3: 3,
      radio4: '北京',
      radio5: '2',
      radio6: '1',

      checked: true,
      checked1: false,
      checked2: true,
      checkList: ['复选框 A', '禁用'],

      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,

      cities: ['上海', '北京', '广州', '深圳'],

      checkboxGroup1: [],
      checked1: true,
      checked2: false,
    }
  },


  methods: {

    changes (val) {
      console.log(val)
    },


    handleCheckAllChange (val) {
      console.log(val)
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }


}
</script>

<style scoped>
.line {
  border-left: 1px solid #9e9e9e;
  height: 1000px;
  margin-left: 8px;
}
</style>